<template>
    <div class="login-container" style="background-image:url('')">
        <el-form :model="ruleForm2" :rules="rules2"
         status-icon
         ref="ruleForm2"
         label-position="left"
         label-width="0px"
         class="demo-ruleForm login-page">
            <h3 class="title">新佳宜信息管理平台</h3>
            <el-form-item prop="username">
                <el-input type="text"
                    v-model="ruleForm2.username"
                    auto-complete="off"
                    placeholder="用户名"
                ></el-input>
            </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password"
                        v-model="ruleForm2.password"
                        auto-complete="off"
                        placeholder="密码"
                    ></el-input>
                </el-form-item>
            <el-checkbox
                v-model="checked"
                class="rememberme"
            >记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining"
                class="denglu"
                >登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import '../../styles/index.less'
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      logining: false,
      ruleForm2: {
        name: '18900000000',
        pwd: '666666'
      },
      rules2: {
        name: [{ required: true, message: '来者何人', trigger: 'blur' }],
        pwd: [{ required: true, message: '交出通关文牒', trigger: 'blur' }]
      },
      checked: false
    }
  },
  methods: {
    ...mapActions(['user/login']), // 引入方法
    handleSubmit () {
      this.$refs.ruleForm2.validate(async isOK => {
        if (isOK) {
          try {
            this.loading = true
            await this['user/login'](this.ruleForm2)
            this.$router.push('/home')
          } catch (error) {
            console.log(error)
          } finally {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.denglu {
  border-color: rgb(60, 191, 252);
}
.login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background:rgb(60, 191, 252);
    // border: 1px solid #7c6868;
    // box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
}
</style>
